<template>
  <div class="wrap">
    <div class="title">
      <div>交易管理</div>
      <div></div>
      <div>我的訂單</div>
    </div>
    <div class="content">
      <div class="contenttop">
        <div>訂單號：104007601409</div>
        <div class="topimg" @click="goback"> 
          <img src="@/assets/xiaoyu.png" alt="">
          <div>返回</div>
        </div>
      </div>
      <div class="contentbottom">
        <div class="cancel">
          <div class="cancelleft">等待審核</div>
          <div class="cancelright">
            <div class="gotocancel">
              <img src="@/assets/dan.png" alt="">
              <div>提交訂單</div>
              <div>2019-10-23 </div>
              <div>14:30 </div>
            </div>
            <div class="yellow">..................</div>
            <div class="tocancel1">
              <img src="@/assets/set1.png" alt="">
              <div>正在處理</div>
            </div>
            <div class="yellow" style="color:#CCCCCC">..................</div>
            <div class="tocancel">
              <img src="@/assets/tuhui.png" alt="">
              <div>完成</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="detailtop">
        <div>收貨人信息</div>
        <div>付款信息</div>
        <div>訂單信息</div>
      </div>
      <div class="detailbottom">
        <div class="detailleft">
          <div class="line">
            <div>聯系人：</div>
            <div>張小四</div>
          </div>
          <div class="line">
            <div>地址：</div>
            <div>廣東省廣州市海珠區新港西路105號</div>
          </div>
          <div class="line">
            <div>手機號碼：</div>
            <div>185****5432 </div>
          </div>
        </div>
        <div class="detailcenter"> 
          <div class="line">
            <div>付款方式： </div>
            <div>Paypal </div>
          </div>
          <div class="line">
            <div>付款時間：</div>
            <div>2019-10-23 12:30</div>
          </div>
          <div class="line">
            <div>付款金額：</div>
            <div>$1200.00 </div>
          </div>
        </div>
        <div class="detailright">
          <div class="line">
            <div>下單編號：</div>
            <div>82088205520 </div>
          </div>
          <div class="line">
            <div>下單時間：</div>
            <div>2020-08-18  10:10:03 </div>
          </div>
        </div>
      </div>
    </div>
    <div class="goods" >
      <div class="goodstop">
        <div>商品信息</div>
        <div>單價 </div>
        <div>數量 </div>
        <div>小計 </div>
        <!-- <div> 核銷碼</div> -->
      </div>
      <div class="goodsbottom" v-for="(item,index) in 2" :key="index" @click="goorderdetail(index)">
        <div class="bao">
          <img src="@/assets/good.png" alt="">
          <div>鮑汁扣去骨鵝掌拼花菇</div>
        </div>
        <div> $288.00</div>
        <div>x2 </div>
        <div>$288.00 </div>
        <!-- <img  v-if="index == 0" src="@/assets/good.png" alt=""> -->
      </div>
      <div class="zongs">
        <div class="zong"> 
            <div>商品數量：</div>
            <div>$1113.00</div>
        </div>
        <div class="zong"> 
            <div>商品總金額：</div>
            <div>$10.00</div>
        </div>
        <div class="zong"> 
            <div>運費：</div>
            <div>-$10.00</div>
        </div>
        <div class="zong"> 
            <div> 折扣：</div>
            <div>-$1113.00</div>
        </div>
        <div class="zong"> 
            <div>優惠碼:</div>
            <div>-$10.00</div>
        </div>
        <div class="zong"> 
            <div>優惠券：</div>
            <div>-$10.00</div>
        </div>
      </div>
      <div class="ying">
        <div>應付總額：</div>
        <div>$1103.00</div>
      </div>
      <!-- <div class="togoods">
      </div> -->
    </div>
  </div>
</template>
<script>
// import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
// import {userInfo,updateUserInfo} from '@/api/user';

export default {
  data(){
    return{
      
    }
  },
  mounted(){

  },
  methods: {
    goback(){
      this.$router.back(-1)
    },
  }
}
</script>
<style scoped>
  .wrap{
    width: 100%;
    /* height: 1358px; */
    background: #F5F5F5;
    box-sizing: border-box;
    padding: 15px;
  }
  .title{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background: #fff;
  }
  .title>div:nth-child(1){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .title>div:nth-child(2){
    width: 8px;
    height: 2px;
    background: #333333;
    margin: 0px 10px;
  }
  .title>div:nth-child(3){
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 3px solid #333333;
  }
  .content{
    width: 100%;
    height: 250px;
    background: #FFFFFF;
    border-radius: 10px;
  }
  .contenttop{
    width: 92%;  
    display: flex; 
    padding:0 39px;
    align-items: center;  
    height: 60px;
    justify-content: space-between;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(206, 206, 206, 0.35);
  }
  .contenttop>div:nth-child(1){     
    display: flex; 
    align-items: center;  
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(206, 206, 206, 0.35);
  }
  .topimg{
    display: flex;
    height: 60px;
    align-items: center;
  }
  .topimg img{
      padding:0 5px;
      height: 12px;
  }
  .topimg div{    
    display: flex; 
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  } 
  .contentbottom{
    width: 100%;
    display: flex;
    height: 189px;
    align-items: center;
  }
  .cancel{
    width: 100%;
    margin: 0 auto;
    height: 120px;
    display: flex;
    align-items: center;
  }
  .cancelleft{
    width: 20%;
    font-size: 20px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FAB816;
    border-right:1px solid #E5E5E5;
  }
  .cancelright{
    width: 80%;
    display: flex;
  }
  .gotocancel{
    padding-left:18px;
    padding-top:8px;
    text-align: center;
  }
  .gotocancel>img:nth-child(1){
    width: 19px;
    padding-bottom:20px;
  }
  .gotocancel>div:nth-child(2){      
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    padding-bottom:5px;
    color: #343434;
  }
  .gotocancel>div:nth-child(3){
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #9A9A9A;
  }
  .gotocancel>div:nth-child(4){
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #9A9A9A;
  }
  .tocancel{
    padding-top:8px;
    text-align: center;
  }
  .tocancel img{
    width: 26px;
    padding-bottom:18px;
  }
  .tocancel div{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343434;
  }
  .tocancel1{
    text-align: center;
  }
  .tocancel1 img{
    width: 45px;
    padding-bottom:6px;
  }
  .tocancel1 div{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #343434;
  }
  .yellow{ 
    color: #FAB816;
    padding-top:8px;
    letter-spacing: 9px;
  }
  .waitpay{
    padding-top:50px;
    text-align: center;
  }
  .waitpaytop{
    text-align: center;
    height: 30px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #E4393C;
  }
  .waitpaybottom{
    display: flex;
    height: 20px;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .waitpaybottom>div:nth-child(1){
      letter-spacing: 6px;
      justify-content: center;
      text-align: center;
      color: #9A9A9A;
  }
  .waitpaybottom>img:nth-child(2){
      margin-top:10px;
      margin-left:5px;
      margin-right:7px;
      width: 8px;
      height: 11px;
  }
  .waitpaybottom>div:nth-child(3){
      letter-spacing: 6px;
      color: #9A9A9A;
  }
  .waitpaybottoms{
    display: flex;
    height: 20px;
    padding-top:30px;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .waitpaybottoms>div:nth-child(1){
      letter-spacing: 6px;
      justify-content: center;
      text-align: center;
      color: #9A9A9A;
  }
  .waitpaybottoms>img:nth-child(2){
      margin-top:10px;
      margin-left:5px;
      margin-right:7px;
      width: 8px;
      height: 11px;
  }
  .waitpaybottoms>div:nth-child(3){
      letter-spacing:6px;
      color: #9A9A9A;
  }
.detail{
    margin-top:20px;
    width: 100%;  
    height: 227px;
    background: #FFFFFF;
    border-radius: 10px;
  }
  .detailtop{
    width: 96%;  
    display: flex; 
    padding:0 20px;
    align-items: center;  
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(206, 206, 206, 0.35);
  }
  .detailtop>div:nth-child(1){
    width: 33%;
  }
  .detailtop>div:nth-child(2){
    width: 33%;
  }
  .detailtop>div:nth-child(3){
    width: 33%;
  }
 .detailbottom{
    display: flex;
    height: 167px;
  }
  .detailleft{
    width: 28%;
    padding-top:30px;
    padding-left:20px;
    padding-right:20px;
    border-right:1px solid #E5E5E5;
  }
  .detailcenter{
    width: 28%;
    padding-top:30px;
    padding-left:20px;
    padding-right:20px;
    border-right:1px solid #E5E5E5;
  }
  .detailright{
    width: 33%;
    padding-top:30px;
    padding-left:20px;
    padding-right:20px;
  }
  .line{
    width: 100%;
    padding:2px 0;
    font-size: 12px !important;
    text-align: left;
    margin: 0 auto;
    display: flex;
  }
  .line>div:nth-child(1){
    width: 32%;
    justify-content: space-between;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .line>div:nth-child(2){
    width: 68%;
    text-align: left;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
 .togoods{
    width: 100%;  
    height: 100px;
    background: #FFFFFF;
    border-radius: 10px;
  }
.goods{
    margin-top:20px;
    width: 100%;  
    /* height: 450px; */
    background: #FFFFFF;
    border-radius: 10px;
  }
  .goodstop{
    width: 96%;  
    display: flex; 
    padding:0 20px;
    align-items: center;  
    height: 60px;
    background: #FFFFFF;
    box-shadow: 0px 1px 0px 0px rgba(206, 206, 206, 0.35);
  }
  .goodstop>div:nth-child(1){
    width: 34%;
  }
  .goodstop>div:nth-child(2){
    width: 16%;
    text-align: center;
  }
  .goodstop>div:nth-child(3){
    width: 16%;
    text-align: center;
  }
  .goodstop>div:nth-child(4){
    width: 16%;
    text-align: center;
  }
  .goodstop>div:nth-child(5){
    width: 16%;
    text-align: center;
  }
 .goodsbottom{
    width: 96%;  
    height: 104px;
    line-height: 104px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
  }
  .goodsbottom>div:nth-child(1){
    width: 34%;
  }
  .bao{
    display: flex;
  }
  .bao img{
    width: 79px;
    padding:12px 0;
  }
  .bao div{
    padding-left: 12px;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
  }
  .goodsbottom>div:nth-child(2){
    width: 16%;
    text-align: center;
  }
  .goodsbottom>div:nth-child(3){
    width: 16%;
    text-align: center;
  }
  .goodsbottom>div:nth-child(4){
    width: 16%;
    text-align: center;
  }
  .goodsbottom>img:nth-child(5){
    width: 79px;
    margin: 0 auto;
    padding:12px;
  }
  .zong{
      width: 30%;
      margin-left:70%;
      display: flex;
      height: 25px;
      justify-content: right;
      text-align: right;

  }
  .zong>div:nth-child(1){
    width: 40%;
    text-align: right;
    font-size: 14px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
  }
  .zong>div:nth-child(2){
    width: 30%;
    text-align: right;
    font-size: 14px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #666666;
  }
  .zongs{
      padding-top:20px;
      padding-bottom:10px;
  }
  .ying{
    width: 22%;
    padding-left:78%;
    display: flex;
    text-align: right;
    right: 0px;
    align-items: center;
    height: 45px;
    background: #F4F4F4;
  }
  .ying>div:nth-child(1){
    font-size: 16px;
    text-align: right;
    font-family: SourceHanSansSC;
    font-weight: bold;
    color: #666666;
  }
  .ying>div:nth-child(2){
    font-size: 16px;
    text-align: right;
    font-family: SourceHanSansSC;
    font-weight: bold;
    color: #E4393C;
  }
</style>